<template>
  <div>
    <ocean :use="template" class="theme_box"></ocean>
    <ocean :use="drawer"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { useTableTemplate, useDrawer } from '@/ocean';
import { GlobalAPI, UserAPI } from '@/app/api';
import { useDialog, useMessage } from 'naive-ui'
import { ref } from 'vue';
import userForm from './form/user.vue';

type Column = {
  username: "aaaa"
  createTime: "2022-08-31 17:46:10"
  endTime: "23:00:00"
  groupId: 2
  id: 92
  lastLogin: null
  openTime: "16:00:00"
  openingTime: "16:00:00-23:00:00"
  password: null
  mobile: "12312312312"
  station: "长宁大1道11"
  status: 1
  storeId: 4
  storeName: "氢氧食品长宁大道店"
  updateTime: null
}

enum Status {
  '正常' = 1,
  '未通过',
}

const dialog = useDialog()
const message = useMessage()
const deleteRow = (row) => {
  dialog.warning({
    title: '提示',
    content: '是否确认删除用户：' + row.username,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      UserAPI.deleteUser({ id: row.id }).then(() => {
        message.success('删除成功');
        template.query();
      })
    },
  })
}

const drawer = useDrawer('用户', userForm, { size: 'small' });

drawer.button('确认', { type: 'primary' }).click(() => {
  let formRef = drawer.getRef();
  formRef.submit().then(() => {
    drawer.close();
    template.query();
    message.success('操作成功')
  })
})
drawer.button('取消').click(() => {
  drawer.close();
})

const template = useTableTemplate<Column>('用户列表', {
  query: data => UserAPI.queryUserList(data).then(({ data, total }) => {
    template.table.setData(data);
    template.pagination.setCount(total);
  })
});

const storeList = ref([]);
GlobalAPI.queryAllStoreList().then(data => storeList.value = data);

template.form.setModel({ status: 1 });
template.form.item('用户名', 'account').input();
template.form.item('手机号', 'phone').input();
template.form.item('门店', 'storeName').select({ options: storeList, labelField: 'storeName', valueField: 'storeName' });

template.button('添加用户', { type: 'primary' }).click(() => drawer.setTitle('添加用户').open())

template.table.column('用户名', 'username');
template.table.column('手机号', 'mobile');
template.table.column('门店名称', 'storeName');
template.table.column('站点', 'station');
template.table.column('状态', 'status').enums(Status);
template.table.column('创建时间', 'createTime');
template.table.define({
  title: '操作',
  render: (row) => (
    <n-space>
      <n-button on-click={() => drawer.setTitle('编辑用户').open({ row })}>编辑</n-button>
      <n-button on-click={() => deleteRow(row)}>删除</n-button>
    </n-space>
  )
});

template.query()
</script>